<template>
  <div class="backgroundWhite">
    <van-sticky>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="搜索"
        input-align="center"
        @search="onSearch"
      >
        <template #left>
          <svg class="icon mr4 ft32" aria-hidden="true" @click="$goPage(-1)">
            <use xlink:href="#icon-back"></use>
          </svg>
        </template>
      </van-search>
      <van-dropdown-menu class="mb8" active-color="#2D65AC">
        <van-dropdown-item :title="typeName" ref="typeRef">
          <dataFilter
            v-model="active"
            :list="typeList"
            @confirm="onConfirm"
          ></dataFilter>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <div class="m16">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="u-f u-f-wrap u-f-jsb">
          <div
            class="blockItem"
            v-for="(item, index) in list"
            :key="index"
            @click="$toPage('/resourceDetail/' + item.id)"
          >
            <div class="box-img positionRe">
              <img v-default-img :src="$oss + item.cover" />
              <div class="play_btn">
                <svg class="icon ft64" aria-hidden="true">
                  <use xlink:href="#icon-playCircle"></use>
                </svg>
              </div>
            </div>

            <div class="ellipsis-1 ft28 fb m8">{{ item.name }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import dataFilter from '@/components/data-filter.vue'
import { ref, getCurrentInstance, onBeforeMount } from 'vue'
const list = ref([])
const page = ref(1)
const limit = 5
const loading = ref(false) //是否加载状态
const finished = ref(false) //是否已加载完成
const searchValue = ref('') //搜索关键字
let active = ref(0) //选中视频类型index
let typeRef = ref(null)
let typeName = ref('全部')
const typeList = ref({}) //类型列表
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

onBeforeMount(async () => {
  let res = await _this.$api.resource.getResourceType()
  typeList.value = res.data
})
const onLoad = () => {
  // 异步更新数据
  _this.$api.user
    .getResourceList({
      page: page.value,
      limit,
      name: searchValue.value,
      type: active.value
    })
    .then((res) => {
      list.value = list.value.concat(res.data)
      page.value++
      // 加载状态结束
      loading.value = false

      // 数据全部加载完成
      if (list.value.length >= res.meta.total) {
        finished.value = true
      }
    })
}
//点击搜索事件
const onSearch = (val) => {
  initEvent()
}
const initEvent = () => {
  // 初始化列表加载状态
  page.value = 1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}
//点击活动列表跳转页面事件
const clickCell = (id) => {
  _this.$toPage('/activityDetail/' + id)
}
// 筛选点击确认
const onConfirm = () => {
  typeName.value = typeList.value[active.value]
  active.value && initEvent()
  typeRef.value.toggle()
}
</script>

<style scoped lang="scss">
.blockItem {
  @include blockItem;
}
:deep(.van-dropdown-menu__item) {
  flex: none;
  margin-left: 8px;
}
.tag_class {
  padding: 10px 12px;
  font-size: 14px;
  margin: 0px 8px 8px 0px;
  background-color: #eee;
  color: #999;
}
.tag_active {
  background-color: $color_primary;
  color: white;
}
.play_btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
}
.ft64 {
  font-size: 0.853333rem;
}
</style>
